<template>
    <div>
        <div>
            <el-select v-model="input.input1" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
            <el-input
                v-model="input.input2"
                placeholder="请输入内容"
            ></el-input>
            <el-button type="primary" icon="el-icon-search" @click="a"
                >搜索</el-button
            >
        </div>
        <el-table :data="tableData1" stripe style="width: 100%">
            <el-table-column prop="carNumber" label="车位号"> </el-table-column>
            <el-table-column
                prop="lessorsId.username"
                label="出租方"
                width="180"
            >
            </el-table-column>
            <el-table-column prop="property" label="产权信息">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="cycle" label="出租周期(月数)">
            </el-table-column>
            <el-table-column label="审核状态">
                <template slot-scope="scope">
                    <span class="red" v-if="scope.row.state == 1">
                        未审核
                    </span>
                    <span class="lv" v-else> 已审核 </span>
                </template>
            </el-table-column>
            <el-table-column label="车位图片">
                <template slot-scope="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="
                            'http://localhost:3000/images/' +
                            (scope.row.imagesName || 'default.jpg')
                        "
                        fit="fill"
                    ></el-image>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.state == 1"
                        type="warning"
                        @click="getState1(scope.row._id)"
                        >审核批准</el-button
                    >
                    <el-button v-else disabled
                        >已审核</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="pageSize1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "parkings"
);
export default {
    data() {
        return {
            input: {
                input1: "address",
                input2: "",
            },
            options: [
                {
                    value: "address",
                    label: "车位地址",
                },
                {
                    value: "lessorsId.username",
                    label: "出租方",
                },
                {
                    value: "carNumber",
                    label: "车位号",
                },
            ],
        };
    },

    mounted() {
        this.auditParkings(this.input);
    },
    computed: {
        ...mapState(["tableData1", "currentPage1", "total1", "pageSize1"]),
    },
    watch: {
        currentPage1: function (val) {
            this.auditParkings(this.input);
        },
        pageSize1: function (val) {
            this.auditParkings(this.input);
        },
    },
    methods: {
        ...mapMutations(["changePageSize", "changecurrentPage"]),
        ...mapActions(["auditParkings", "getState"]),
        a() {
            this.auditParkings(this.input);
        },
        handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changecurrentPage(val);
        },
        async getState1(a) {
            const data = await this.getState(a);
            if (data.status == 1) {
                this.auditParkings(this.input);
            }
        },
    },
};
</script>

<style>
.red {
    color: red;
}
.lv {
    color: green;
}
.el-pagination{
    text-align: center;
}
</style>